<template>
  <view class="container">
    <!-- 顶部Tab切换 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{active: currentTab === 0}"
        @click="switchTab(0)"
      >
        已核销
      </view>
      <view 
        class="tab-item" 
        :class="{active: currentTab === 1}"
        @click="switchTab(1)"
      >
       未核销
      </view>
     <!-- <view class="tab-line" :style="tabLineStyle"></view> -->
    </view>

    <!-- 订单列表 -->
   <!-- <scroll-view 
      class="order-list" 
      scroll-y 
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    > -->
      <view 
        class="order-item" 
        v-for="(item, index) in orderList" 
        :key="index"
        @click="viewDetail(item)"
      >
        <!-- 商品图片 -->
        <image class="goods-image" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
        <image class="goods-image" v-else src="/static/icon_haibao.png" mode="aspectFill"></image>
        <view class="goods-info">
          <!-- 商品名称 -->
          <view class="goods-name">{{item.productName}}</view>
          
          <!-- 抢购状态 -->
          <view class="rush-status" :style="{color: getStatusColor(item.productStatus)}">
            {{item.productStatus | formatStatus}}
          </view>
          
          <!-- 价格信息 -->
          <view class="price-section">
            <text class="original-price">¥{{item.originalPrice}}</text>
            <text class="current-price">¥{{item.currentPrice}}</text>
          </view>
          
          <!-- 核销时间 -->
          <view class="verification-time">
            <text class="time-label">核销时间：</text>
            <text>{{item.verifyTime || '待核销'}}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-status">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMore">没有更多了</text>
      </view>
  <!--  </scroll-view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 0-我的 1-所有
      tabLineStyle: {
        left: '15%'
      },
      orderList: [],
      page: 1,
      pageSize: 10,
      loading: false,
      refreshing: false,
      noMore: false
    }
  },
  filters: {
    formatStatus(status) {
      const statusMap = {
        1: '上架',
        2: '下架',
        /* 3: '已核销',
        4: '已过期' */
      }
      return statusMap[status] || '未知状态'
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      if (this.currentTab === index) return
      this.currentTab = index
      this.tabLineStyle.left = index === 0 ? '15%' : '65%'
      this.page = 1
      this.noMore = false
	  this.orderList=[]
	  if(index==0){
		 this.loadData() 
	  }else{
		  this.unQyeryPage()
	  }
      
    },
    unQyeryPage(){
		uni.showLoading({
			title: '加载中'
		})
		if(this.page==1){
		  this.orderList=[]
		}
		this.$http('jeecg-boot/app/market/bicVerificationCode/unQyeryPage',{
			pageNo:this.page,
			pageSize:10,
		},'POST').then(res => {
			 uni.hideLoading();
			this.refreshing=false
		 	this.orderList=[...this.orderList, ...res.result.records]
		})
	},
    // 获取状态颜色
    getStatusColor(status) {
      const colorMap = {
        1: '#FF5A5F', // 抢购中 - 红色
        2: '#999999',  // 已抢光 - 灰色
        3: '#07C160',  // 已核销 - 绿色
        4: '#FF9900'   // 已过期 - 橙色
      }
      return colorMap[status] || '#333333'
    },
    
    // 加载数据
    async loadData() {
      //if (this.loading || this.noMore) return
      
      //this.loading = true
      uni.showLoading({
      	title: '加载中'
      })
	  if(this.page==1){
		  this.orderList=[]
	  }
      this.$http('jeecg-boot/app/market/bicVerificationCode/qyeryPage',{
      	pageNo:this.page,
      	pageSize:10,
      },'POST').then(res => {
      	 uni.hideLoading();
		 this.refreshing=false
       	this.orderList=[...this.orderList, ...res.result.records]
      })
       
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.page = 1
	  this.orderList=[]
      this.noMore = false
	  if(this.currentTab==0){
		 this.loadData() 
	  }else{
		   this.unQyeryPage()
	  }
      
    },
    
    // 上拉加载更多
    loadMore() {
	  console.log("上拉加载更多")
      if (!this.noMore) {
        this.page++
        if(this.currentTab==0){
        	this.loadData() 
        }else{
        	this.unQyeryPage()
        }
      }
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `orderDetail?productId=${item.productId}`+'&orderId='+item.orderId
      })
    },
    
    // 模拟数据
    getMockData() {
      const statusList = [1, 2, 3, 4]
      const data = []
      const count = this.page === 3 ? 3 : this.pageSize // 模拟第三页数据不足
      
      for (let i = 0; i < count; i++) {
        const status = statusList[Math.floor(Math.random() * statusList.length)]
        data.push({
          id: `${this.page}-${i}`,
          goodsImage: 'http://dmsphoto.66km.com.cn/thFiles/908774A6-3B38-4C63-B6E4-19B3A8FBFB65.png',
          goodsName: `测试商品${this.page}-${i+1}`,
          status: status,
          originalPrice: (Math.random() * 100 + 50).toFixed(2),
          currentPrice: (Math.random() * 80 + 30).toFixed(2),
          verificationTime: status === 3 ? 
            `2023-07-${28-this.page} ${10+i}:30:25` : null
        })
      }
      
      return data
    }
  },
  onReachBottom() {
  	this.page++;
  if(this.currentTab==0){
  	this.loadData() 
  }else{
  	this.unQyeryPage()
  }
  },
  onPullDownRefresh() {
  	this.page = 1;
  	if(this.currentTab==0){
  		this.loadData() 
  	}else{
  		this.unQyeryPage()
  	}
  	setTimeout(function() {
  		uni.stopPullDownRefresh();
  	}, 1000);
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

/* Tab栏样式 */
.tab-bar {
  display: flex;
  position: relative;
  height: 44px;
  background-color: #fff;
  z-index: 10;
  
  .tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #666;
	padding: 24rpx 0;
    
    &.active {
      color: #333;
      font-weight: bold;
    }
  }
  
  .tab-line {
    position: absolute;
    bottom: 0;
    width: 20%;
    height: 3px;
    background-color: #FF5A5F;
    transition: left 0.3s ease;
  }
}

/* 订单列表样式 */
.order-list {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.order-item {
  display: flex;
  margin-bottom: 10px;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  
  .goods-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 12px;
  }
  
  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .goods-name {
    font-size: 15px;
    color: #333;
    font-weight: bold;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;  /* 限制显示行数 */
	  overflow: hidden;
	  text-overflow: ellipsis;
  /*  @include text-ellipsis(2); */
  }
  
  .rush-status {
    font-size: 12px;
    margin: 3px 0;
  }
  
  .price-section {
    display: flex;
    align-items: center;
    margin: 5px 0;
    
    .original-price {
      font-size: 12px;
      color: #999;
      text-decoration: line-through;
      margin-right: 8px;
    }
    
    .current-price {
      font-size: 16px;
      color: #FF5A5F;
      font-weight: bold;
    }
  }
  
  .verification-time {
    font-size: 12px;
    color: #666;
    
    .time-label {
      color: #999;
    }
  }
}

.loading-status {
  display: flex;
  justify-content: center;
  padding: 15px;
  font-size: 14px;
  color: #999;
}

.no-data {
  display: flex;
  justify-content: center;
  padding: 50px 0;
  color: #999;
  font-size: 14px;
}
</style>